<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Minimalistic Slideshow Gallery with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Minimalistic Slideshow Gallery with jQuery" />
        <meta name="keywords" content="minimalistic, slideshow, jquery, gallery, thumbnails, css3"/>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

    </head>

    <body>	
		<div class="content">
			<h1>Minimalistic Slideshow Gallery with jQuery</h1>

		<div id="msg_slideshow" class="msg_slideshow">
			<div id="msg_wrapper" class="msg_wrapper">
			</div>
			<div id="msg_controls" class="msg_controls"><!-- right has to animate to 15px, default -110px -->
				<a href="#" id="msg_grid" class="msg_grid"></a>
				<a href="#" id="msg_prev" class="msg_prev"></a>
				<a href="#" id="msg_pause_play" class="msg_pause"></a><!-- has to change to msg_play if paused-->
				<a href="#" id="msg_next" class="msg_next"></a>
			</div>
			<div id="msg_thumbs" class="msg_thumbs"><!-- top has to animate to 0px, default -230px -->
					<div class="msg_thumb_wrapper">
					<a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg"/></a>
					<a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg"/></a>
					<a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg"/></a>
					<a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg"/></a>
					<a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg"/></a>
					<a href="#"><img src="images/thumbs/6.jpg" alt="images/6.jpg"/></a>
					</div>
					<div class="msg_thumb_wrapper" style="display:none;">
					<a href="#"><img src="images/thumbs/7.jpg" alt="images/7.jpg"/></a>
					<a href="#"><img src="images/thumbs/8.jpg" alt="images/8.jpg"/></a>
					<a href="#"><img src="images/thumbs/9.jpg" alt="images/9.jpg"/></a>
					<a href="#"><img src="images/thumbs/10.jpg" alt="images/10.jpg"/></a>
					<a href="#"><img src="images/thumbs/11.jpg" alt="images/11.jpg"/></a>
					<a href="#"><img src="images/thumbs/12.jpg" alt="images/12.jpg"/></a>
				</div>
				<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
				<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
				<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
				<span class="msg_loading"></span><!-- show when next thumb wrapper loading -->
				</div>
			</div>


			<a href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/" class="back">Back to the Codrops Tutorial</a>
			<div>
				
        <div>
				<span class="reference">
					<a href="http://www.codrops.com/">© Codrops</a>
					<a href="http://www.flickr.com/photos/arcticpuppy/">Photos by tibchris</a>
				</span>
			</div>
		</div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="MinimalisticSlideshowGallery.js"></script>
    </body>
</html>